<template>
  <div class="weui-tab">
    <view class="content">
      <image class='background' src="../../static/images/review_back.jpg" mode="aspectFill"></image>
    </view>
    <div class="weui-navbar">
      <block v-for="(item, index) in tabs" :key="index">
        <div :id="index" :class="{'weui-bar__item_on' : activeIndex === index}" class="weui-navbar__item" @click="tabClick">
          <div class="weui-navbar__title">{{item}}</div>
        </div>
      </block>
      <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
    </div>
    <div class="weui-tab__panel">
      <div :hidden="activeIndex !== 0">
        <div v-for="(item, index) in reviewList" :key="index" class="contain">
          <div v-if="item.type === '单选题'">
            {{index+1}}.（单选）{{item.questionContent}}
            <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
              <div :class="(selectIndex === index && optionList[index1] === answerList[0]) ? 'right_option' : ''">{{optionList[index1]}}.{{option}}</div>
            </div>
          </div>
          <div v-if="item.type === '多选题'">
            {{index+1}}.（多选）{{item.questionContent}}
            <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
              <div v-if="selectIndex === index && optionList[index1] === answerList[0]" class="right_option">{{optionList[index1]}}.{{option}}</div>
              <div v-else-if="selectIndex === index && optionList[index1] === answerList[1]" class="right_option">{{optionList[index1]}}.{{option}}</div>
              <div v-else-if="selectIndex === index && optionList[index1] === answerList[2]" class="right_option">{{optionList[index1]}}.{{option}}</div>
              <div v-else-if="selectIndex === index && optionList[index1] === answerList[3]" class="right_option">{{optionList[index1]}}.{{option}}</div>
              <div v-else>{{optionList[index1]}}.{{option}}</div>
            </div>
          </div>
          <div v-else-if="item.type === '判断题'">
            {{index+1}}.（判断）{{item.questionContent}}
            <div v-if="selectIndex === index" class="answer_text">
              {{fill_judge_Answer}}
            </div>
          </div>
          <div v-else-if="item.type === '填空题'">
            {{index+1}}.（填空）{{item.questionContent}}
            <div v-if="selectIndex === index" class="answer_text">
              {{fill_judge_Answer}}
            </div>
          </div>
          <div class="wrong_source">
            — —{{item.original[0]}}
          </div>
          <div class="buttons">
            <button class="single_button" size="mini" hover-class="button_hover" @click="(item.type === '单选题' || item.type ==='多选题')? select_handler(index, item.questionAnswer) : fill_judge_handler(index, item.questionAnswer[0])">查看答案</button>
            <button class="single_button" size="mini" hover-class="button_hover" @click="eazy_handler(index)">太简单了</button>
            <button class="single_button" size="mini" hover-class="button_hover" @click="star_handler(index)">
              <div v-if="item.favorite === false">添加收藏</div>
              <div v-else>
                <image class="star_icons" src="../../static/icons/star.png" mode="aspectFill"></image>
                star
              </div>
            </button>
          </div>
        </div>
      </div>
      <div :hidden="activeIndex !== 1">
        <div v-if="overcomeList.length === 0" class="weui-tab__content">空荡荡~</div>
        <div v-else>
          <div v-for="(item, index) in overcomeList" :key="index" class="contain">
            <div v-if="item.type === '单选题'">
              {{index+1}}.（单选）{{item.questionContent}}
              <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
                {{optionList[index1]}}.{{option}}
              </div>
            </div>
            <div v-if="item.type === '多选题'">
              {{index+1}}.（多选）{{item.questionContent}}
              <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
                {{optionList[index1]}}.{{option}}
              </div>
            </div>
            <div v-else-if="item.type === '判断题'">
              {{index+1}}.（判断）{{item.questionContent}}
            </div>
            <div v-else-if="item.type === '填空题'">
              {{index+1}}.（填空）{{item.questionContent}}
            </div>
            <div class="buttons">
              <button class="single_button" size="mini" hover-class="button_hover" @click="wrong_recover(index)">恢复题目</button>
              <button class="single_button" size="mini" hover-class="button_hover" @click="wrong_delete(index)">删除题目</button>
            </div>
          </div>
        </div>
      </div>
      <div :hidden="activeIndex !== 2">
        <div v-if="starList.length === 0" class="weui-tab__content">空荡荡~</div>
        <div v-else>
          <div v-for="(item, index) in starList" :key="index" class="contain">
            <div v-if="item.type === '单选题'">
              {{index+1}}.（单选）{{item.questionContent}}
              <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
                <div :class="(star_selectIndex === index && optionList[index1] === star_answerList[0]) ? 'right_option' : ''">{{optionList[index1]}}.{{option}}</div>
              </div>
            </div>
            <div v-if="item.type === '多选题'">
              {{index+1}}.（多选）{{item.questionContent}}
              <div v-for="(option, index1) in item.questionOption" :key="index1" class="options">
                <div v-if="star_selectIndex === index && optionList[index1] === star_answerList[0]" class="right_option">{{optionList[index1]}}.{{option}}</div>
                <div v-else-if="star_selectIndex === index && optionList[index1] === star_answerList[1]" class="right_option">{{optionList[index1]}}.{{option}}</div>
                <div v-else-if="star_selectIndex === index && optionList[index1] === star_answerList[2]" class="right_option">{{optionList[index1]}}.{{option}}</div>
                <div v-else-if="star_selectIndex === index && optionList[index1] === star_answerList[3]" class="right_option">{{optionList[index1]}}.{{option}}</div>
                <div v-else>{{optionList[index1]}}.{{option}}</div>
              </div>
            </div>
            <div v-else-if="item.type === '判断题'">
              {{index+1}}.（判断）{{item.questionContent}}
              <div v-if="star_selectIndex === index" class="answer_text">
                {{star_fill_judge_Answer}}
              </div>
            </div>
            <div v-else-if="item.type === '填空题'">
              {{index+1}}.（填空）{{item.questionContent}}
              <div v-if="star_selectIndex === index" class="answer_text">
                {{star_fill_judge_Answer}}
              </div>
            </div>
            <div class="buttons">
              <button class="single_button" size="mini" hover-class="button_hover" @click="(item.type === '单选题' || item.type ==='多选题')? star_select_handler(index, item.questionAnswer) : star_fill_judge_handler(index, item.questionAnswer[0])">查看答案</button>
              <button class="single_button" size="mini" hover-class="button_hover" @click="cancel_star_handler(index)">取消收藏</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      api: 'http://120.25.78.18:8010',
      grade: 0,
      subject: '',
      activeIndex: 0,
      fill_judge_Answer: '',
      star_fill_judge_Answer: '',
      selectIndex: -1,
      star_selectIndex: -1,
      answerList: [],
      star_answerList: [],
      wrongList: [],
      reviewList: [],
      overcomeList: [],
      starList: [],
      tabs: ['复习错题', '已攻克错题', '已收藏错题'],
      optionList: ['A', 'B', 'C', 'D'],
      favoriteQuestionId: [],
      favoriteBoolean: [],
      overcomeQuestionId: [],
      overcomeBoolean: []
    }
  },
  computed: {
    navbarSliderClass () {
      if (this.activeIndex === 0) {
        this.answerList = []
        this.fill_judge_Answer = ''
        return 'weui-navbar__slider_0'
      }
      if (this.activeIndex === 1) {
        return 'weui-navbar__slider_1'
      }
      if (this.activeIndex === 2) {
        this.star_answerList = []
        this.star_fill_judge_Answer = ''
        return 'weui-navbar__slider_2'
      }
    }
  },
  methods: {
    tabClick (e) {
      this.activeIndex = parseInt(e.currentTarget.id)
    },
    select_handler (index, answer) {
      this.answerList = []
      this.selectIndex = index
      for (var i = 0, flag = 0; i < 4; i++) {
        if (this.reviewList[index].questionOption[i] === answer[flag]) {
          this.answerList.push(this.optionList[i])
          flag += 1
        }
      }
    },
    fill_judge_handler (index, answer) {
      this.selectIndex = index
      this.fill_judge_Answer = answer
    },
    eazy_handler (index) {
      this.answerList = []
      this.fill_judge_Answer = ''
      this.overcomeList.push(this.reviewList[index])
      this.add_overcome(this.reviewList[index].questionId)
      this.reviewList.splice(index, 1)
    },
    star_handler (index) {
      if (this.reviewList[index].favorite === false) {
        this.starList.push(this.reviewList[index])
        this.reviewList[index].favorite = true
        this.add_favorite(this.reviewList[index].questionId)
      } else {
        for (var i = 0; i < this.starList.length; i++) {
          if (this.starList[i].questionId === this.reviewList[index].questionId) {
            this.starList.splice(i, 1)
          }
        }
        this.reviewList[index].favorite = false
        this.cancel_favorite(this.reviewList[index].questionId)
      }
    },
    cancel_star_handler (index) {
      var isFind = false
      this.star_answerList = []
      this.star_fill_judge_Answer = ''
      for (var i = 0; i < this.reviewList.length; i++) {
        if (this.reviewList[i].questionId === this.starList[index].questionId) {
          isFind = true
          this.reviewList[i].favorite = false
          this.cancel_favorite(this.starList[index].questionId)
          break
        }
      }
      if (isFind === false) {
        for (i = 0; i < this.overcomeList.length; i++) {
          if (this.overcomeList[i].questionId === this.starList[index].questionId) {
            this.overcomeList[i].favorite = false
            this.cancel_favorite(this.starList[index].questionId)
            break
          }
        }
      }
      this.starList.splice(index, 1)
    },
    star_select_handler (index, answer) {
      this.star_answerList = []
      this.star_selectIndex = index
      for (var i = 0, flag = 0; i < 4; i++) {
        if (this.starList[index].questionOption[i] === answer[flag]) {
          this.star_answerList.push(this.optionList[i])
          flag += 1
        }
      }
    },
    star_fill_judge_handler (index, answer) {
      this.star_selectIndex = index
      this.star_fill_judge_Answer = answer
    },
    wrong_recover (index) {
      this.reviewList.push(this.overcomeList[index])
      this.cancel_overcome(this.overcomeList[index].questionId)
      this.overcomeList.splice(index, 1)
    },
    add_favorite (questionId) {
      this.favoriteQuestionId.push(questionId)
      this.favoriteBoolean.push(true)
    },
    cancel_favorite (questionId) {
      this.favoriteQuestionId.push(questionId)
      this.favoriteBoolean.push(false)
    },
    add_overcome (questionId) {
      this.overcomeQuestionId.push(questionId)
      this.overcomeBoolean.push(true)
    },
    cancel_overcome (questionId) {
      this.overcomeQuestionId.push(questionId)
      this.overcomeBoolean.push(false)
    },
    delete_wrong (questionId) {
      let _that = this
      wx.request({
        url: _that.api + '/api/setDel',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: 1,
          qid: questionId,
          isDel: true
        },
        success: function (res) {
          console.log(res)
        }
      })
    },
    wrong_delete (index) {
      let _that = this
      wx.showModal({
        title: '删除题目',
        content: '确认删除题目后题目将无法恢复哦~',
        confirmText: '确认删除',
        cancelText: '取消删除',
        success: function (res) {
          console.log(res)
          if (res.confirm) {
            for (var i = 0; i < _that.starList.length; i++) {
              if (_that.starList[i].questionId === _that.overcomeList[index].questionId) {
                _that.starList[i].splice(i, 1)
                break
              }
            }
            _that.delete_wrong(_that.overcomeList[index].questionId)
            _that.overcomeList.splice(index, 1)
          }
        }
      })
    },
    requestWrongList () {
      let _that = this
      wx.request({
        url: _that.api + '/api/userSubjectTitle?id=1&grade=' + _that.grade + '&subject=' + _that.subject, // 仅为示例，并非真实的接口地址
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(_that.wrongList)
          _that.wrongList = res.data
          for (var i = 0; i < _that.wrongList.length; i++) {
            if (_that.wrongList[i].overcome === false) {
              _that.reviewList.push(_that.wrongList[i])
            }
            if (_that.wrongList[i].overcome === true) {
              _that.overcomeList.push(_that.wrongList[i])
            }
            if (_that.wrongList[i].favorite === true) {
              _that.starList.push(_that.wrongList[i])
            }
          }
        }
      })
    }
  },
  onLoad: function (option) {
    this.grade = option.grade
    this.subject = option.subject
    this.answerList = []
    this.fill_judge_Answer = ''
    this.star_answerList = []
    this.star_fill_judge_Answer = ''
    this.reviewList = []
    this.overcomeList = []
    this.starList = []
    this.favoriteQuestionId = []
    this.favoriteBoolean = []
    this.overcomeQuestionId = []
    this.overcomeBoolean = []
    this.requestWrongList()
  },
  onUnload: function () {
    let _that = this
    wx.request({
      url: _that.api + '/api/setFavorite',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        uid: 1,
        qid: _that.favoriteQuestionId,
        isFavorite: _that.favoriteBoolean
      },
      success: function (res) {
        console.log(res)
      }
    })
    wx.request({
      url: _that.api + '/api/setOvercome',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        uid: 1,
        qid: _that.overcomeQuestionId,
        isOvercome: _that.overcomeBoolean
      },
      success: function (res) {
        console.log(res)
      }
    })
  }
}
</script>

<style scoped>
.weui-navbar {
  position:fixed;
  top:0;
  background-color: rgb(131,182,225);
}
.weui-bar__item_on {
  color: #FFB5C5;
}
.weui-navbar__slider_0 {
  left: 29rpx;
  transform: translate(0);
  background-color: #FFB5C5;
}
.weui-navbar__slider_1 {
  left: 29rpx;
  transform: translateX(250rpx);
  background-color: #FFB5C5;
}
.weui-navbar__slider_2{
  left: 29rpx;
  transform: translateX(500rpx);
  background-color: #FFB5C5;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
  z-index: -1;
}
.weui-tab__content {
  padding-top: 60px;
  text-align: center;
}
.contain {
  width: 100%rpx;
  height: auto;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
  background-color: white;
}
.options {
  margin-left: 10rpx;
}
.answer_text{
  color: green;
  margin-top: 25rpx;
  text-align: center;
}
.right_option {
  color: rgb(35, 161, 83);
}
.wrong_source {
  position:absolute;
  right: 5px;
  font-size: 20rpx;
}
.star_icons {
  width: 35rpx;
  height: 35rpx;
  margin-top: 5rpx;
}
.buttons {
  margin-top: 15rpx;
  margin-button: 20rpx;
  text-align: center;
}
.single_button {
  color: black;
  background-color: rgb(252, 172, 178);
  margin-top: 30rpx;
  margin-left: 20rpx;
}
.button_hover {
  opacity: 0.5;
}

.delete_overcome_button {
  margin-top: 30rpx;
  margin-left: 20rpx;
}
</style>
